<template>
  <div class="header">
    <div class="mainwarp">
      <div class="logo">
        <a href="@/assets/index.html"><img src="@/assets/images/log.png" /></a>
      </div>
      <div class="headerright">
        <button class="returnHome" @click="returnHome">返回首页</button>
      </div>
    </div>
  </div>
  <div class="jianliBox">
    <div class="jlpart1">
      <img src="@/assets/images/img1.png" />
    </div>
    <div class="jlpart2">
      <div class="jlpart2_1">
        <div class="jlbox1">
          <h1>一分钟填写简历</h1>
          <p>填写以下信息即可生成一份简历，一步注册，起航你的成功之梦！</p>
        </div>
        <el-form
          :model="information"
          :rules="rules"
          label-width="120px"
          ref="information"
        >
          <el-form-item class="nametxt" label="姓 名" prop="name">
            <el-input v-model="information.name" class="" type="text" />
          </el-form-item>
          <el-form-item class="nametxt" label="性 别" prop="gender">
            <el-radio-group v-model="information.gender">
              <el-radio :label="0">男</el-radio>
              <el-radio :label="1">女</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>

        <!-- 用户 -->
        <el-form :model="user" :rules="rules" ref="user" label-width="120px">
          <el-form-item class="nametxt" label="手机号码" prop="phone">
            <el-input v-model="user.phone" class="" type="text" />
          </el-form-item>
          <el-form-item class="nametxt" label="电子邮箱" prop="email">
            <el-input v-model="user.email" class="" type="text" />
          </el-form-item>
        </el-form>

        <!-- 最高学历 -->
        <el-form
          :model="degree"
          :rules="rules"
          ref="degree"
          label-width="120px"
          :inline="true"
        >
          <el-form-item class="nametxt" label="毕业学校" prop="school">
            <el-input v-model="degree.school" type="text" />
          </el-form-item>
          <el-form-item label="学历" prop="degree" label-width="60px">
            <el-select
              v-model="degree.degree"
              placeholder=""
              style="width: 120px"
            >
              <el-option label="大专" :value="0" />
              <el-option label="本科" :value="1" />
              <el-option label="硕士" :value="2" />
              <el-option label="博士" :value="3" />
            </el-select>
          </el-form-item>
          <el-form-item class="nametxt" label="专业名称" prop="professional">
            <el-input v-model="degree.professional" class="" type="text" />
          </el-form-item>
          <el-form-item label="类别" prop="professionalType" label-width="60px">
            <el-select
              v-model="degree.professionalType"
              placeholder=""
              style="width: 120px"
            >
              <el-option label="工学" :value="0" />
              <el-option label="哲学" :value="1" />
              <el-option label="经济学" :value="2" />
              <el-option label="医学" :value="3" />
            </el-select>
          </el-form-item>
        </el-form>
        <!-- 求职意向 -->
        <el-form
          :model="expected"
          :rules="rules"
          ref="expected"
          label-width="120px"
        >
          <el-form-item label="期望工作地点" prop="expectedCity">
            <el-select
              v-model="expected.expectedCity"
              placeholder=""
              style="width: 250px"
            >
              <el-option label="北京" :value="0" />
              <el-option label="上海" :value="1" />
              <el-option label="广州" :value="2" />
              <el-option label="深圳" :value="3" />
            </el-select>
          </el-form-item>
          <el-form-item label="期望月薪" prop="expectedSalary">
            <el-select
              v-model="expected.expectedSalary"
              placeholder=""
              style="width: 250px"
            >
              <el-option label="面议" :value="0" />
              <el-option label="5k以下" :value="1" />
              <el-option label="5k-10k" :value="2" />
              <el-option label="10k以上" :value="3" />
            </el-select>
          </el-form-item>
          <el-form-item class="nametxt" label="期望工作性质" prop="workNature">
            <el-radio-group v-model="expected.workNature">
              <el-radio :label="0">全职</el-radio>
              <el-radio :label="1">兼职</el-radio>
              <el-radio :label="2">实习</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="求职状态" prop="workStatus">
            <el-select
              v-model="expected.workStatus"
              placeholder=""
              style="width: 250px"
            >
              <el-option label="离职-随时到岗" :value="0" />
              <el-option label="离职-月内到岗" :value="1" />
              <el-option label="在职-看看机会" :value="2" />
              <el-option label="在职-暂不考虑" :value="3" />
            </el-select>
          </el-form-item>
        </el-form>

        <div class="jlbox2">
          <input
            @click="check"
            name=""
            type="button"
            value="生成简历"
            class="jlbtn"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import router from "@/router";
import {
  showInformation,
  showExpected,
  showDegree,
  createInformation,
  createExpected,
  createDegree,
  editInformation,
  editExpected,
  editDegree,
} from "@/api/personal.js";
import { showUser, editUser } from "@/api/user";
import { ElMessageBox } from "element-plus";

export default {
  data() {
    return {
      //创建/修改
      isCreate: true,
      //用户表
      user: {
        phone: "",
        email: "",
      },
      //基本信息表
      information: {
        name: "",
        gender: "",
      },
      //求职意向表
      expected: {
        workStatus: "",
        workNature: "",
        expectedSalary: "",
        expectedCity: "",
      },
      //学历表
      degree: {
        school: "",
        degree: "",
        professional: "",
        professionalType: "",
      },
      rules: {
        //用户
        phone: [
          {
            required: true,
            message: "手机号码不能为空",
            trigger: "blur",
          },
          {
            min: 11,
            max: 11,
            message: "手机号码为11位",
            trigger: "blur",
          },
        ],
        email: {
          required: true,
          message: "电子邮箱不能为空",
          trigger: "blur",
        },
        //基本信息
        name: {
          required: true,
          message: "姓名不能为空",
          trigger: "blur",
        },
        gender: {
          required: true,
          message: "性别不能为空",
          trigger: "blur",
        },
        //求职意向
        workStatus: {
          required: true,
          message: "求职状态不能为空",
          trigger: "blur",
        },
        workNature: {
          required: true,
          message: "期望工作性质不能为空",
          trigger: "blur",
        },
        expectedSalary: {
          required: true,
          message: "期望月薪不能为空",
          trigger: "blur",
        },
        expectedCity: {
          required: true,
          message: "期望工作地点不能为空",
          trigger: "blur",
        },
        //学历
        school: {
          required: true,
          message: "毕业学校不能为空",
          trigger: "blur",
        },
        degree: {
          required: true,
          message: "学历不能为空",
          trigger: "blur",
        },
        professional: {
          required: true,
          message: "专业名称不能为空",
          trigger: "blur",
        },
        professionalType: {
          required: true,
          message: "专业类别不能为空",
          trigger: "blur",
        },
      },
    };
  },
  methods: {
    /**
     * 返回首页方法
     */
    //返回
    returnHome() {
      router.push({ name: "Home" });
    },
    //数据校验
    check() {
      this.$refs.information.validate((valid) => {
        if (valid) {
          this.$refs.user.validate((valid) => {
            if (valid) {
              // 邮箱注册逻辑
              // 检查邮箱格式是否正确
              if (
                this.user.email.match(
                  /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
                )
              ) {
                this.$refs.degree.validate((valid) => {
                  if (valid) {
                    this.$refs.expected.validate((valid) => {
                      if (valid) {
                        this.complete();
                      } else {
                        ElMessageBox.alert("您输入的信息不合法", "消息");
                      }
                    });
                  } else {
                    ElMessageBox.alert("您输入的信息不合法", "消息");
                  }
                });
              } else {
                ElMessageBox.alert("您输入的邮箱格式不正确", "消息");
              }
            } else {
              ElMessageBox.alert("您输入的信息不合法", "消息");
            }
          });
        } else {
          ElMessageBox.alert("您输入的信息不合法", "消息");
        }
      });
    },

    //填写完毕
    complete() {
      //修改手机号和邮箱
      editUser(this.user).then((res) => {
        if (res.data.code === 0) {
          if (this.isCreate) {
            // 如果是第一次填写，需要保存基本信息、求职意向、最高学历信息到数据库中
            createInformation(this.information).then(async (res) => {
              if (res.data.code === 0) {
                //等待异步方法执行完毕
                await createExpected(this.expected);
                await createDegree(this.degree);
                ElMessageBox.alert("保存成功", "消息", {
                  confirmButtonText: "OK",
                  callback: () => {
                    location.reload();
                  },
                });
              } else {
                ElMessageBox.alert(res.data.message, "消息");
              }
            });
          } else {
            // 如果不是第一次填写，需要更新基本信息、求职意向、最高学历信息到数据库中
            editInformation(this.information).then(async (res) => {
              if (res.data.code === 0) {
                await editExpected(this.expected);
                await editDegree(this.degree);
                ElMessageBox.alert("修改成功", "消息", {
                  confirmButtonText: "OK",
                  callback: () => {
                    location.reload();
                  },
                });
              } else {
                ElMessageBox.alert(res.data.message, "消息");
              }
            });
          }
        } else {
          ElMessageBox.alert(res.data.message, "消息");
        }
      });
    },
  },
  /**
   * 查询用户信息、基本信息、求职意向、最高学历信息
   */
  mounted() {
    showUser().then((res) => {
      this.user = res.data.data;
      showInformation().then((res) => {
        //判断查询到的基本信息是否为空，如果不为空，说明是修改
        if (res.data.data != null) {
          this.isCreate = false;
          this.information = res.data.data;
          showExpected().then((res) => {
            if (res.data.code === 0) {
              this.expected = res.data.data;
            } else {
              ElMessageBox.alert(res.data.message, "消息");
            }
          });
          showDegree().then((res) => {
            if (res.data.code === 0) {
              this.degree = res.data.data;
            } else {
              ElMessageBox.alert(res.data.message, "消息");
            }
          });
        }
      });
    });
  },
};
</script>
<style scoped>
/* 引入外部样式 */
@import url("@/assets/css/login.css");

.el-input {
  --el-input-width: 250px;
  --el-input-height: 34px;
  --el-select-width: 250px;
}
</style>